<template>
  <div class="assembly">
    <h4 class="font-weight-bold text-center mb-4">实现的组件</h4>
    <ul>
      <li class="col-4 mb-4" v-for="(item, index) in Lists" :key="index">
        <img :src="item.img" alt="">
        <h5>{{item.title}}</h5>
        <router-link :to="{ name: item.name }" class="btn btn-outline-primary">查看 Demo</router-link>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'assembly',
  setup () {
    const Lists = [
      {
        id: 0,
        img: require('@/assets/Dropdown.svg'),
        title: 'Dropdown 下拉菜单',
        name: 'assembly-dropdown'
      }, {
        id: 1,
        img: require('@/assets/Form.svg'),
        title: 'Form 验证表单',
        name: 'assembly-form'
      }, {
        id: 2,
        img: require('@/assets/Spin.svg'),
        title: 'Loading 全局读取',
        name: 'assembly-loading'
      }, {
        id: 3,
        img: require('@/assets/Alert.svg'),
        title: 'Alert 全局提示',
        name: 'assembly-alert'
      }, {
        id: 4,
        img: require('@/assets/Modal.svg'),
        title: 'Modal 对话框',
        name: 'assembly-modal'
      }, {
        id: 5,
        img: require('@/assets/Upload.svg'),
        title: 'Upload 上传',
        name: 'assembly-upload'
      }
    ]
    return {
      Lists
    }
  }
})
</script>

<style scoped>
.font-weight-bold {
  font-weight: 700;
}
ul {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0px;
}
ul li {
  list-style-type: none;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  margin-right: 20px;
  width: 31.333% !important;
}
ul li:last-child {
  margin-right: 0px;
}
img {
  width: 120px;
  height: 118px;
  margin: 16px 0px;
}
h5 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 10px;
}
</style>
